<template>
	<view :id="'chat'+index">
		<!-- 时间 -->
		<view v-if="showTime" class="time">{{showTime}}</view>
		<!-- 左边 -->
		<view class="chatContentLeft" v-if="item.id === 0 && item.data !==''">
			<image class="headPortrait" :src="item.headPortrait"></image>
			<view class="chatText chatTextLeft">{{item.data}}</view>
		</view>

		<!-- 右边 -->
		<view class="chatContentRight" v-else-if="item.id === 1 && item.data !==''">
			<image class="headPortrait" :src="item.headPortrait"></image>
			<view class="chatText chatTextRight">{{item.data}}</view>
		</view>
	</view>
</template>

<script>
	import time from "@/common/time.js";
	export default {
		props: {
			item: {
				type: Object,
				default: null
			},
			index: {
				type: Number,
				default: 0
			},
			// 上一条消息的时间
			pretime: {
				type: Number | String,
				default: 0
			}
		},
		computed: {
			showTime() {
				let times = new time().chatTime(this.item.time, this.pretime);
				return new time().formTime(times);
			}
		}
	}
</script>

<style lang="scss">
	.chatContentRight {
		flex-direction: row-reverse;
	}

	.chatContentLeft,
	.chatContentRight {
		display: flex;
		align-items: flex-start;
		padding: 10rpx 20rpx;

		>.headPortrait {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}

		>.chatText {
			max-width: 400rpx;
			min-width: 100rpx;
			margin: 25rpx;
			background-color: #FFFFFF;
			padding: 10rpx;
			border-radius: 10rpx;
			position: relative;
		}
	}

	// ==聊天时的小三角==
	.chatTextLeft {
		&::before {
			@include circularTriangle;
			left: 0;
			transform: translateX(-100%);
		}
	}

	.chatTextRight {
		&::before {
			@include circularTriangle;
			right: 0;
			transform: translateX(100%) rotateY(180deg);
		}
	}

	// --聊天时的小三角--

	// 时间差
	.time {
		@include flexCenterCenter;
		font-size: .9rem;
		color: #E5E5E5;
	}
</style>
